<template>
<div>
  <a :style="{height:height,width:width,fontSize:fontsize}" @click="click"><span></span><span></span><span></span><span></span>{{buttonName}}</a>
</div>
</template>

<script>

export default {

  props: {
    buttonName:{
      type:String,
      default:'按钮'
    },
    width: {
      type: String,
      default: '8vw'
    },
    height: {
      type: String,
      default: '4vh'
    },
    fontsize: {
      type: String,
      default: '0.8em'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {

  },

  methods: {
    click() {
      this.$emit("click");
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-size: 1.6vh;*/
}

/*body {*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  height: 100vh;*/
/*  background: #050801;*/
/*  font-family: "Raleway", sans-serif;*/
/*  font-weight: bold;*/
/*}*/

a {
  border-radius: 4px;
  align-content: center;
  position: relative;
  /*display: inline-block;*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  background-color: rgba(255,255,255,0.1);

}

a:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;

}

a span {
  position: absolute;
  display: block;
}

a span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.3vh;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 5s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 0.3vh;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 5s linear infinite;
  animation-delay: 1.2s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

a span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0.3vh;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 5s linear infinite;
  animation-delay: 2.4s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 0.3vh;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 5s linear infinite;
  animation-delay: 3.6s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
